<template>
  <div class="report-manage-wrapper">
    <header>
      <h3>报表</h3>
      <!-- <div class="search-box">
        <input type="text" placeholder="查询报表" v-model="keyword">
      </div> -->
    </header>
    <div class="main-wrapper">
      <div class="header-box">
        <div class="title-box">
          <img src="../../assets/img/ic_push_collection@2x.svg" alt="">
          <span>常用报表</span>
        </div>
        <div class="edit-btn-box imgLink" v-show="editStatus==1">
          <img src="../../assets/img/ic_subscribe_add@2x.svg" alt="">
          <span @click="toOpenEdit()">编辑</span>
        </div>
        <div class="edit-btn-box" v-show="editStatus==2">
          <span class="confirm-add imgLink" @click="saveFrequentlyReports()">确认</span>
          <span class="imgLink" @click="cancleEdit()">取消</span>
        </div>
      </div>
      <!-- 常用报表 -->
      <div class="more-use-report">
        <div class="item" v-for="(item,index) in moreUseReportList">
          <img src="../../assets/img/ic_Subscribelist_form_operate@2x.svg" alt="">
          <span @click="openReportPage(item.link, item.name)">{{item.name}}</span>
          <img src="../../assets/img/ic_subscribe_delete@2x.svg" alt="" v-show="editStatus==2" @click="deleteMoreReport(item,index)">
        </div>
      </div>
      <!-- 财务报表 -->
      <div class="finance-report">
        <h3>
          <img src="../../assets/img/ic_push_financialform@2x.svg" alt="">
          <span>财务报表</span>
        </h3>
        <div class="report-box">
          <div class="item" v-for="(item,index) in financeReportList">
            <img src="../../assets/img/ic_Subscribelist_form_financial@2x.svg" alt="">
            <span  @click="openReportPage(item.link, item.name)">{{item.name}}</span>
            <img src="../../assets/img/ic_subscribe_add@2x.svg" alt="" v-show="editStatus==2" @click="addToMoreUseReportList(item,index)">
          </div>
        </div>
      </div>
      <!-- 运营报表 -->
      <div class="operate-report">
        <h3>
          <img src="../../assets/img/ic_push_financialform@2x.svg" alt="">
          <span>运营报表</span>
        </h3>
        <div class="report-box">
          <div class="item" v-for="(item,index) in operateReportList">
            <img src="../../assets/img/ic_Subscribelist_form_operate@2x.svg" alt="">
            <span @click="openReportPage(item.link, item.name)">{{item.name}}</span>
            <img src="../../assets/img/ic_subscribe_add@2x.svg" alt="" v-show="editStatus==2" @click="addToMoreUseReportList(item,index)">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import {deepCopyObjArray} from "../../assets/js/help.js";
  export default {
    mixins:[common],
    data() {
      return {
        keyword: '',
        editStatus: 1, //编辑状态(1:非编辑;2:编辑)
        initMoreUseReportList: [],
        initFinanceReportList: [],
        initOperateReportList: [],
        moreUseReportList: [],
        financeReportList: [],
        operateReportList: [],
        authzUserId: '', //用户id
      }
    },
    created(){
      this.getUserPower();
      this.getMoreUseReport()
    },
    methods: {
      //保存常用报表
      saveFrequentlyReports(){
        let params = {}
        let arr = []
        for(let i = 0; i<this.moreUseReportList.length; i++){
          let obj = this.moreUseReportList[i]
          arr.push(obj.power)
        }
        params.id = this.authzUserId
        params.frequentlyUsedReport = arr.join(',')
        API.fetchPost('authz/user/saveFrequentlyReports',params).then(res=>{
          let data = res.data
          this.authzUserId = data.id
          this.editStatus = 1
          this.showToast('保存成功', 1);
        },err=>{})
      },
      //打开报表页面
      openReportPage(path, name){
        // this.$router.push({path:path,query:{}})
        this.openNewTab(path, {name: name})
      },
      //获取用户常用报表列表
      getMoreUseReport(){
        let self = this
        API.fetchGet('authz/user/getFrequentlyReports',{}).then(res=>{
          if(res.status==1){
            self.authzUserId = res.data.id
            let moreUseArr = res.data.frequentlyUsedReport==null ? [] : res.data.frequentlyUsedReport.split(',')
            for(let i = 0; i<moreUseArr.length; i++){
              for(let j=0; j<self.financeReportList.length; j++){
                let obj = self.financeReportList[j]
                if(moreUseArr[i]==obj.power){
                  obj.type = 1
                  self.initMoreUseReportList.push(obj)
                  self.financeReportList.splice(j,1)
                }
              }
              for(let k=0; k<self.operateReportList.length; k++){
                let obj = self.operateReportList[k]
                if(moreUseArr[i]==obj.power){
                  obj.type = 2
                  self.initMoreUseReportList.push(obj)
                  self.operateReportList.splice(k,1)
                }
              }
            }
            self.moreUseReportList = self.initMoreUseReportList
          }
        },err=>{})
      },
      //获取当前用户权限
      getUserPower(){
        let self = this
        let allPerms = JSON.parse(sessionStorage.getItem('perms')) || [];
        let financialReport = this.$store.state.reportForms.financialReport;
        let operateReport = this.$store.state.reportForms.operateReport;
        this.initFinanceReportList = []
        this.initOperateReportList = []
        this.initMoreUseReportList = []
        this.moreUseReportList = [] //用户常用报表
        for(let i = 0; i<financialReport.length; i++){
          let obj = financialReport[i]
          for(let j = 0; j<allPerms.length; j++){
            if(obj.power==allPerms[j]){
              obj.type = 1
              self.initFinanceReportList.push(obj)
              allPerms.splice(j,1)
              break;
            }
          }
        }
        for(let i = 0; i<operateReport.length; i++){
          let obj = operateReport[i]
          for(let j = 0; j<allPerms.length; j++){
            if(obj.power==allPerms[j]){
              obj.type = 2
              self.initOperateReportList.push(obj)
              allPerms.splice(j,1)
              break;
            }
          }
        }
        this.financeReportList = this.initFinanceReportList
        this.operateReportList = this.initOperateReportList
      },
      /**
       * index:数组下标 数组;reportType: 报表类型:(1:财务报表;2:运营报表)
       */
      addToMoreUseReportList(item,index){
        if(item.type==1){
          this.financeReportList.splice(index,1)
        }else if(item.type==2){
          this.operateReportList.splice(index,1)
        }
        this.moreUseReportList.push(item)
      },
      //开启编辑状态
      toOpenEdit(){
        this.initMoreUseReportList = deepCopyObjArray(this.moreUseReportList)
        this.initFinanceReportList = deepCopyObjArray(this.financeReportList)
        this.initOperateReportList = deepCopyObjArray(this.operateReportList)
        this.editStatus=2
      },
      //取消编辑
      cancleEdit(){
        this.moreUseReportList = deepCopyObjArray(this.initMoreUseReportList)
        this.financeReportList = deepCopyObjArray(this.initFinanceReportList)
        this.operateReportList = deepCopyObjArray(this.initOperateReportList)
        this.editStatus=1
      },
      //删除常用报表
      deleteMoreReport(item,index){
        if(item.type==1){
          this.financeReportList.push(item)
        }else if(item.type==2){
          this.operateReportList.push(item)
        }
        this.moreUseReportList.splice(index,1)
      }
    }
  }
</script>

<style lang="less" scoped>
.report-manage-wrapper{
  width: fit-content;
  background-color: #e9edf1;
  margin-left: -1px;
  margin-right: -1px;
  header,.main-wrapper{
    background: #ffffff;
    // border: 1px solid #D7DCE2;
  }
  header{
    display: flex;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    margin-bottom: 12px;
    h3{
      font-size: 16px;
      color: #333333;
    }
    .search-box{
      input{
        width: 218px;
        height: 34px;
        line-height: 34px;
        padding: 0;
        background: url('../../assets/img/ic_search@2x.svg') no-repeat 10px 9px;
        background-size: 16px 16px;
        border: 1px solid #D7DCE2;
        border-radius: 2px;
        padding-left: 35px;
      }
      input::-webkit-input-placeholder {
        font-size: 14px;
        color: #999999;
      }
    }
  }
  .main-wrapper{
    .header-box{
      height: 50px;
      line-height: 50px;
      display: flex;
      justify-content: flex-start;
      padding-left: 30px;
      border-bottom: 1.5px solid #D7DCE2;
      .title-box{
        margin-right: 40px;
        img{
          width: 24px;
          height: 24px;
          margin-right: 5px;
          margin-bottom: 2px;
        }
        span{
          font-size: 14px;
          color: #666666;
          letter-spacing: 0.4px;
          font-weight: 600;
        }
      }
      .edit-btn-box{
        img{
          width: 16px;
          height: 16px;
          margin-right: 5px;
          margin-bottom: 2px;
        }
        span{
          font-size: 14px;
          color: #5995D8;
          font-weight: 600;
          cursor: pointer;
          &.confirm-add{
            margin-right: 15px;
          }
        }
      }
    }
    .more-use-report,.report-box{
      display: flex;
      flex-wrap: wrap;
    }
    .more-use-report,.report-box{
      padding: 20px 0 20px 30px;
      .item{
        width: 200px;
        height: 40px;
        line-height: 40px;
        background: #F6F6F6;
        border: 1px solid #EBEBEB;
        border-radius: 4px;
        padding-left: 10px;
        margin-right: 30px;
        margin-bottom: 20px;
        position: relative;
        span{
          font-size: 14px;
          color: #444444;
          font-weight: 600;
          padding-left: 30px;
          cursor: pointer;
        }
        img:first-child{
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translateY(-50%);
          width: 20px;
          height: 20px;
        }
        img:last-child{
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
    }
    .finance-report,.operate-report{
      h3{
        height: 50px;
        line-height: 50px;
        border-bottom: 1.5px solid #D7DCE2;
        padding-left: 30px;
        span{
          font-size: 14px;
          color: #444444;
        }
        img{
          width: 24px;
          height: 24px;
          position: relative;
          top: -2px;
        }
      }
    }
  }
}
</style>
